<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">审核详情</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px 130px;
      width: 73%;
      box-shadow: 0px 0px 12px rgba(98, 106, 239,0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{deptName}}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
<el-tabs tab-position="left" style="margin: 20px 0 0 0;" class="demo-tabs fix">
    <el-tab-pane label="评分考核" v-if="WaitStateList.scoreState==1">
      <Score :empId="empId" :update="update" :thirdId="thirdId" :positionId="positionId" :type="type"></Score>
    </el-tab-pane>
    <el-tab-pane label="okr考核" v-if="WaitStateList.okrState==1">
      <Okr :empId="empId" :update="update" :thirdId="thirdId" :positionId="positionId" :type="type"></Okr>
    </el-tab-pane>
    <el-tab-pane label="" v-if="WaitStateList.scoreState!=1&&WaitStateList.okrState!=1">
      <el-result
        icon="success"
        title="申报完成"
        sub-title="已完成申报，谢谢您的配合">
      <template #extra>
          <el-button type="primary" @click="goback">下一位</el-button>
        </template>
      </el-result>
    </el-tab-pane>
  </el-tabs>
</template>

<script  setup>
import {ref, onBeforeMount, reactive,getCurrentInstance} from "vue";
import { useRoute } from 'vue-router'
import { Timer } from '@element-plus/icons-vue';
import { Calendar } from '@element-plus/icons-vue'
import Score from './components/score'
import Okr from './components/okr'
import {getFourthTaskEnterState} from '@/api/task'
import { ElMessage } from 'element-plus'
//import {getFourthTask,getFourthTaskState,getPositionOne} from '@/api/api'

const route = useRoute()
let empId=route.query.empId;
let deptName=route.query.deptName;
let empName=route.query.empName;
let positionId=route.query.positionId;
let position=route.query.position;
let type=route.query.type

const WaitStateList=ref([])
let stateUserId=route.query.empId
let assessorId=JSON.parse(localStorage.getItem('userInfo')).id;
onBeforeMount(()=>{
    getFourthTaskEnterState({assessorId,stateUserId})
    .then(data=>{
        WaitStateList.value=data.data;
    });
})

const { proxy } = getCurrentInstance();
const goback=()=>{
  proxy.$router.go(-1)
}

const update=(item)=>{
  if(item=='score')
    WaitStateList.value.scoreState=2
  else if(item=='okr')
    WaitStateList.value.okrState=2
}
</script>
<style  scoped>

:deep(.my-label) {
  background:rgba(98, 106, 239,0.15) !important;
  color: #626aef !important;
  border: #626aef 2px solid !important ;
}
:deep(.my-content) {
  color:#fff !important;
  background: rgba(98, 106, 239,0.9)!important;
  border: #626aef 2px solid !important ;
}
</style>
